<!--
 * @Description: 
 * @Author: lz
 * @Date: 2022-12-22 21:57:53
 * @LastEditTime: 2022-12-22 21:57:54
 * @LastEditors: lz
-->

<template>
  <div class="manage-container">
    <div class="pa-flex content">
      <div class="left">
        <div class="search">
      <el-input v-model="projectName" placeholder="项目名称" class="input"></el-input>
      <el-button class="search-button" @click="getList()">搜索</el-button>
    </div>
        <div class="head head1">
          <div class="tabs" :class="{ 'active': status == 2 }" @click="status = 2">待解决</div>
          <div class="tabs" :class="{ 'active': status == 1 }" @click="status = 1">已解决</div>
        </div>
        <div class="c1">
          <div class="scrollBox">
            <!-- <div class="lItem active">
              <div>镇海中学扩建工程</div>
              <div class="time">12:04</div>
            </div>-->
            <template v-if="tableData.length">
              <div
                class="lItem"
                :class="{ 'active': item.id == selItem }"
                v-for="(item, index) in tableData"
                :key="index"
                @click="handleSelect(item.id, index)"
              >
                <div class="title">{{ item.projectName }}</div>
                <div class="time">{{ item.createTime }}</div>
              </div>
            </template>
            <el-empty v-else :image-size="50" description="暂无数据"></el-empty>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="head head2">
          <template v-if="roleType==='1'">
            <img :src="formData.agencyUserInfo.headPortrait" alt />
            <div>代办人员: {{formData.agencyUserInfo.realname||''}}</div>
            <div>联系方式: {{ formData.agencyUserInfo.mobile||'' }}</div>
          </template>
          <template v-else>
            <img
              :src="formData.windowUserInfo.headPortrait"
              alt
              v-if="formData.windowUserInfo.headPortrait !== undefined"
            />
            <div v-if="formData.windowUserInfo.realname !== undefined ">窗口人员: {{formData.windowUserInfo.realname}}</div>
            <div v-if="formData.windowUserInfo.mobile !== undefined ">联系方式: {{ formData.windowUserInfo.mobile }}</div>
          </template>
        </div>
        <div class="c2">
          <template v-if="tableData.length">
            <div class="t pa-mb-2">问题详情</div>
            <div class="shadow">
              <div class="pa-ai-center">
                <div
                  class="pa-fs-ellipsis shadow-name"
                  style="font-size: 24px;font-weight: 400;"
                >{{ formData.projectName }}</div>
                <div class="tag">
                  {{
                  getTag(formData.types)
                  }}
                </div>
                <div class="kf">
                  客户：{{ `${formData.projectLeader || ''} ${formData.projectPhone ||
                  ''}`
                  }}
                </div>
              </div>
              <div class="pa-flex pa-mt-2">
                <div class="pItem">
                  <div class="label">联报类型</div>
                  <div class="val">
                    <span v-if="formData.gtype == 1">通电</span>
                    <span v-if="formData.gtype == 2">通水</span>
                    <span v-if="formData.gtype == 3">通气</span>
                    <span v-if="formData.gtype == 4">通网络</span>
                  </div>
                </div>
                <div class="pItem">
                  <div class="label">联报内容</div>
                  <div class="val">{{ formData.guaranty }}</div>
                </div>
                <div class="pItem">
                  <div class="label">提交时间</div>
                  <div class="val">{{ formData.createTime }}</div>
                </div>
              </div>
            </div>
            <div class="shadow pa-mt-2">
              <div style="font-size: 24px;font-weight: 400;">需求描述</div>
              <div class="pa-mt-2">{{ formData.content }}</div>
            </div>
            <div v-if="status == 1&&formData.answer">
              <div class="t pa-mt-3">协助解答</div>
              <div class="shadow pa-mt-2">
                <div>{{ formData.answer }}</div>
                <div class="uploadBox pa-mt-2">
                  <div class="file pa-flex" @click="downFile(formData)" v-if="formData.file">
                    <div class="icon">
                      <!-- <img
                      src="https://pdftoword.55.la/uploads/20220428/e086d8a09a04704ec69c66f78118eca9.png"
                      alt
                      />-->
                      <img
                        v-if="getIconTitle(formData.file)==='.png'||getIconTitle(formData.file)==='.jpg'"
                        src="@/assets/images/_img.png"
                        alt
                        srcset
                      />
                      <img
                        v-else-if="getIconTitle(formData.file)==='.xlsx'"
                        src="@/assets/images/_excel.png"
                        alt
                        srcset
                      />
                      <img
                        v-else-if="getIconTitle(formData.file)==='.docx'"
                        src="@/assets/images/_word.png"
                        alt
                        srcset
                      />
                      <i v-else style="fontSize:40px" class="el-icon-folder"></i>
                    </div>
                    <div>文件</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else :image-size="50" description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { listApi, detailApi, helpApi } from '@/api/problemApi'
import { uploadImage } from '@/api/commonApi'
export default {
  data () {
    return {
      loading: false,
      selItem: 0,
      status: 2,
      tableData: [],
      formData: {
        agencyUserInfo: {}, windowUserInfo: {}
      },
      answer: '',
      imgUrl: '',
      fileList: [], roleType: localStorage.getItem("X-Role-Type"),
      projectName:''
    }
  },
  mounted () {
    this.getList()
  },
  watch: {
    status () {
      this.getList()
    }
  },
  methods: {
    getTag (type) {
      const obj = {
        0: '咨询',
        1: '计划变更',
        2: '外线联报',
      }
      return obj[type]
    },
    downFile () {
      if (this.formData.file) {
        window.open(this.formData.file, '_blank')
      }
    },
    getIconTitle (fileUrL) {
      if (!fileUrL) {
        return ''
      }
      const endIndex = fileUrL.lastIndexOf(".");
      const str = fileUrL.substr(endIndex);
      return str
    },
    async handleRequest (file) {
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await uploadImage(formData)
      if (res.code == 0) {
        this.imgUrl = res.imgUrl
        this.$message.success('上传成功')
      } else {
        this.$message.error('上传失败')
      }
    },
    async submit () {
      if (!this.answer) {
        this.$message.warning('请输入解答内容')
        return
      }
      const res = await helpApi({
        answer: this.answer,
        file: this.imgUrl,
        zdUserId: JSON.parse(localStorage.getItem('P-User-Info')).id,
        id: this.selItem
      })
      if (res.code == 0) {
        this.$message.success('操作成功')
        this.getList()
      }
    },
    async handleSelect (id) {
      this.selItem = id
      this.answer = ''
      this.imgUrl = ''
      this.fileList = []
      const res = await detailApi({
        id
      })
      this.formData = Object.assign({}, this.formData, res.data)
    },
    async getList () {
      this.answer = ''
      this.imgUrl = ''
      this.fileList = []
      this.tableData = []
      this.formData = {
        agencyUserInfo: {}, windowUserInfo: {}
      }
      try {
        this.loading = true
        const res = await listApi({
          status: this.status,
          agencyPeople: JSON.parse(localStorage.getItem('P-User-Info')).id,
          projectName: this.projectName
        })
        this.tableData = res.data.map(n => {
          n.createTime = n.createTime ? n.createTime.slice(0, 10) : ''
          return n
        })
        this.selItem = this.tableData[0].id
        this.handleSelect(this.tableData[0].id)
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.pa-fs-ellipsis{
  white-space:break-spaces
}
.manage-container {
  .content {
    background: #ffffff;
    box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
    border-radius: 24px;
    min-height: calc(100vh - 240px);

    .head {
      height: 40px;
      border-bottom: 1px solid #e6ebf5;
      display: flex;

      &.head1 {
        padding-left: 48px;
        // padding-top: 37px;

        .tabs {
          margin-right: 33px;
          color: #999;
          font-size: 18px;
          line-height: 24px;
          cursor: pointer;
          position: relative;

          &.active {
            font-size: 24px;
            color: #408cff;

            &::after {
              content: '';
              width: 78px;
              height: 4px;
              background: #408cff;
              position: absolute;
              bottom: -2px;
              left: 0;
            }
          }
        }
      }

      &.head2 {
        align-items: center;
        padding-left: 22px;
        color: #0a1629;

        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
        }

        div {
          margin-left: 22px;
        }
      }
    }

    .left {
      flex: 1;
      border-right: 1px solid #e6ebf5;

      .c1 {
        padding: 31px 11px;
        overflow-y: auto;
        height: 472px;
        overflow-x: hidden;

        // .scrollBox {
        //   overflow-y: auto;
        // }

        .lItem {
          // height: 70px;
          border-radius: 14px;
          // padding: auto 19px auto 37px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #999;
          font-size: 24px;
          cursor: pointer;
          position: relative;

          &.active {
            color: #408cff;
            background: #f4f9fd;

            &::after {
              content: '';
              width: 4px;
              height: 70px;
              background: #3f8cff;
              border-radius: 2px;
              position: absolute;
              right: -13px;
            }
          }

          .title {
            margin: 10px 0 10px 37px;
          }

          .time {
            font-size: 14px;
            color: #7d8592;
            margin-right: 19px;
          }
        }
      }
    }

    .right {
      flex: 2;

      .c2 {
        padding: 36px 25px 22px 47px;

        .t {
          font-size: 20px;
          color: #0a1629;
        }

        .shadow {
          border-radius: 10px;
          box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.14);
          padding: 21px 31px;
          .tag {
            background: #d8e8ff;
            border: 1px solid #2f86fd;
            border-radius: 12px;
            padding: 5px 6px 6px 11px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #2f86fd;
            margin-left: 22px;
            margin-right: 41px;
          }
          .pItem {
            margin-right: 50px;

            .label {
              color: #91929e;
              font-size: 14px;
              margin-bottom: 10px;
            }
          }

          :deep(textarea) {
            height: 110px;
          }

          .el-button--primary {
            padding: 14px 12px;
            font-size: 16px;
            border-radius: 14px;
            height: 44px;
          }

          .uploadBox {
            .upload {
              width: 269px;
              height: 65px;
              background: #f3f6ff;
              border: 2px dashed #c2c2c2;
              border-radius: 11px;
              padding: 10px;

              .icon {
                width: 43px;
                height: 43px;
                background: #2251f8;
                border-radius: 11px 11px 11px 11px;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 20px;
              }

              .desc1 {
                font-size: 13px;
                color: #171b1e;
                margin-bottom: 10px;
              }

              .desc2 {
                font-size: 11px;
                color: #717579;
              }
            }

            .file {
              width: 269px;
              height: 65px;
              background: #f3f6ff;
              border: 2px solid #2251f8;
              border-radius: 11px;
              padding: 10px;
              display: flex;
              align-items: center;
              cursor: pointer;

              img {
                width: 44px;
                height: 44px;
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 1280px) {
  .manage-container {
    .content {
      .left {
        .c1 {
          .lItem {
            font-size: 21px;
            font-weight: 400;
            // white-space: nowrap;
            .title {
              // width: 170px;
              // white-space: nowrap;
              // overflow: hidden;
              // text-overflow: ellipsis;
              margin-left: 33px;
            }
            .time {
              font-size: 12px;
            }
          }
        }
      }
      .right {
        .c2 {
          padding-left: 35px;
          .shadow {
            padding-left: 28px;
            // white-space: nowrap;
            .shadow-name {
              // width: 170px;
            }
            .tag {
              margin-left: 20px;
              margin-right: 36px;
            }
            .kf {
              font-size: 14px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
.search {
    margin-bottom: 30px;
    margin-top: 37px;
    .input {
      width: 215px;
      height: 48px;
      box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
      border-radius: 14px;
      margin-left: 16px;
    }
    .search-button {
      width: 90px;
      height: 41px;
      background: #4880ff;
      border-radius: 5px;
      margin-left: 24px;
      color: #fff;
    }
  }
</style>